<!DOCTYPE html>
<html>
<head>
    <title>兜伴</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" type="text/css" href="css/page3.css" />
</head>
<body>
    <div id="header">
        <img src="img/page3/user-head.png" />
        <div id="user-id">
            <span>用户名（兜伴用户名）</span>
            <p>兜伴号：<em>12345678</em></p>
        </div>
    </div>
    <div id="content">
        <div class="con1">
            <img src="img/page3/con1-banner.jpg" />
        </div>
        <div class="con2">
            <em>青岛市图书馆</em>
            <p>青岛市市北区延吉路68号</p>
        </div>
        <div class="con3">
            <h2 class="con3-title">参与者<em>12</em>人</h2>
            <ul class="cxz-user">
                <li><a href="#"><img src="img/page3/con3-ico1.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico2.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico3.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico4.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico5.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico1.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico1.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico2.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico3.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico4.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico5.png" /></a></li>
                <li><a href="#"><img src="img/page3/con3-ico1.png" /></a></li>
            </ul>
        </div>
        <div class="con4">
            <h2 class="con4-title">活动名称<span class="c4-td">2016-11-11</span></h2>
            <div id="c4-text">
                <p>如果没有遇见你，我将会是在哪里，日子过的怎么样
                ，人生日否要珍惜，也许认识某一人，过着平凡的日
                子，不知道会不会，也有爱情甜如蜜，
                最多显示5行文字，多余数量文字用...来展示，点击
                查看全文可以将活动内容展开，显示出所有内容...</p>
                <div id="zk-text">查看全文▼</div>
            </div>
        </div>
        <div class="con5">
            <h2 class="con5-title">活动影集</h2>
            <div class="c5-slide">
                <link rel="stylesheet" type="text/css" href="ku/swiper/swiper.min.css" />
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="img/page3/con5-banner.jpg" /></div>
                        <div class="swiper-slide"><img src="img/page3/con5-banner.jpg" /></div>
                        <div class="swiper-slide"><img src="img/page3/con5-banner.jpg" /></div>
                        <div class="swiper-slide"><img src="img/page3/con5-banner.jpg" /></div>
                        <div class="swiper-slide"><img src="img/page3/con5-banner.jpg" /></div>
                        <div class="swiper-slide"><img src="img/page3/con5-banner.jpg" /></div>
                    </div>
                    <!-- 添加焦点图切换按钮 -->
                    <div class="swiper-pagination"></div>
                </div>
                <!-- 焦点图js代码 -->
                <script type="text/javascript" src="ku/swiper/swiper.min.js"></script>
                <script type="text/javascript">
                    //按条件启动焦点图【如果图片为1，则禁用自动切换效果】
                    var slide_obj = document.querySelectorAll('.swiper-slide');
                    if(slide_obj.length <= 1){
                        var swiper = new Swiper('.swiper-container', {
                            autoHeight: true,
                            pagination: '.swiper-pagination',
                            autoplayDisableOnInteraction : false,
                            paginationClickable: true
                        });
                    }else{
                        var swiper = new Swiper('.swiper-container', {
                            loop: true,
                            autoplay: 3000,
                            autoHeight: true,
                            pagination: '.swiper-pagination',
                            autoplayDisableOnInteraction : false,
                            paginationClickable: true
                        });
                    }
                </script>
            </div>
        </div>
        
        <div class="con6">
            <div class="c6-ets">
                <img class="c6-ets-img1" src="img/page3/con6-ico1.png" />
                <img class="c6-ets-img2" src="img/page3/con6-ico2.png" />
            </div>
        </div>
    </div>
    <div id="footer">
        <a href="#">此刻开始记录活动点滴 — <em>点击下载<span>DOBER</span></em></a>
    </div>
</body>
<script>
    //文字内容溢出隐藏效果JS代码【超出5行自动隐藏】
    function ondoc(){
        var c4_p = document.querySelector('#c4-text > p');
        var zk_text = document.getElementById('zk-text');
        if(c4_p.offsetHeight > 105){
            c4_p.classList.add('sl-text');
            zk_text.style.display = 'block';
        }
        zk_text.onclick = function(){
            if(c4_p.className != ''){
                c4_p.className = '';
                this.innerHTML = '收起▲';
            }else{
                c4_p.classList.add('sl-text');
                this.innerHTML = '查看全文▼';
            }
        }
    }
    window.onload = ondoc;
</script>
</html>